<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>springboot-vue多图片上传demo</title>
    <link rel="stylesheet" href="./plugins/element-ui/element-ui.css">
  <script src="http://www.jq22.com/jquery/vue.min.js"></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/axios.min.js"></script>
  <style>
    .upload_warp_img_div_del {
      position: absolute;
      top: 6px;
      width: 16px;
      right: 4px;
    }

    .upload_warp_img_div_top {
      position: absolute;
      top: 0;
      width: 100%;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.4);
      line-height: 30px;
      text-align: left;
      color: #fff;
      font-size: 12px;
      text-indent: 4px;
    }

    .upload_warp_img_div_text {
      white-space: nowrap;
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .upload_warp_img_div img {
      max-width: 100%;
      max-height: 100%;
      vertical-align: middle;
    }

    .upload_warp_img_div {
      position: relative;
      height: 100px;
      width: 120px;
      border: 1px solid #ccc;
      margin: 0px 30px 10px 0px;
      float: left;
      line-height: 100px;
      display: table-cell;
      text-align: center;
      background-color: #eee;
      cursor: pointer;
    }

    .upload_warp_img {
      border-top: 1px solid #D2D2D2;
      padding: 14px 0 0 14px;
      overflow: hidden
    }

    .upload_warp_text {
      text-align: left;
      margin-bottom: 10px;
      padding-top: 10px;
      text-indent: 14px;
      border-top: 1px solid #ccc;
      font-size: 14px;
    }

    .upload_warp_right {
      float: left;
      width: 57%;
      margin-left: 2%;
      height: 100%;
      border: 1px dashed #999;
      border-radius: 4px;
      line-height: 130px;
      color: #999;
    }

    .upload_warp_left img {
      margin-top: 32px;
    }

    .upload_warp_left {
      float: left;
      width: 40%;
      height: 100%;
      border: 1px dashed #999;
      border-radius: 4px;
      cursor: pointer;
    }

    .upload_warp {
      margin: 14px;
      height: 130px;
    }

    .upload {
      border: 1px solid #ccc;
      background-color: #fff;
      width: 650px;
      box-shadow: 0px 1px 0px #ccc;
      border-radius: 4px;
    }

    .hello {
      width: 650px;
      margin-left: 34%;
      text-align: center;
    }
    .button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
 
    border: 1px solid #dcdfe6;
   
  
    -webkit-appearance: none;
    text-align: left;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    float: right;
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}
    
  </style>
</head>
<body>
<div id="app">
  <div class="hello">
    <div class="upload">
      <div class="upload_warp">
        <div class="upload_warp_left" @click="fileClick">
          <img src="./img/upload.png">
        </div>
        <div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
          或者将文件拖到此处
        </div>
      </div>
      <div class="upload_warp_text">
        选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}
      </div>
      <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
      <div class="upload_warp_img" v-show="imgList.length!=0">
        <div class="upload_warp_img_div" v-for="(item,index) of imgList" id="imgList">
          <div class="upload_warp_img_div_top">
            <div class="upload_warp_img_div_text">
              {{item.file.name}}
            </div>
            <img src="./img/del.png" class="upload_warp_img_div_del" @click="fileDel(index)">
          </div>
          <img :src="item.file.src">
        </div>
         
      </div>
      
      <div><button class="button" @click="upload()">上传图片</button></div>
    </div>
  </div>
  {{imgList}}
</div>
<script>
  //  import up from  './src/components/Hello'
  var app = new Vue({
    el: '#app',
    data () {
      return {
        imgList: [],
        size: 0
      }
    },
      methods: {
          fileClick() {
              document.getElementById('upload_file').click()
          },
          fileChange(el) {
              if (!el.target.files[0].size) return;
              this.fileList(el.target);
              el.target.value = ''
          },
          fileList(fileList) {
              let files = fileList.files;
              for (let i = 0; i < files.length; i++) {
                  //判断是否为文件夹
                  if (files[i].type != '') {
                      this.fileAdd(files[i]);
                  } else {
                      //文件夹处理
                      this.folders(fileList.items[i]);
                  }
              }
          },
          //文件夹处理
          folders(files) {
              let _this = this;
              //判断是否为原生file
              if (files.kind) {
                  files = files.webkitGetAsEntry();
              }
              files.createReader().readEntries(function (file) {
                  for (let i = 0; i < file.length; i++) {
                      if (file[i].isFile) {
                          _this.foldersAdd(file[i]);
                      } else {
                          _this.folders(file[i]);
                      }
                  }
              })
          },
          foldersAdd(entry) {
              let _this = this;
              entry.file(function (file) {
                  _this.fileAdd(file)
              })
          },
          fileAdd(file) {
              //总大小
              this.size = this.size + file.size;
              //判断是否为图片文件
              if (file.type.indexOf('image') == -1) {
                  file.src = 'wenjian.png';
                  console.info("----"+file)
                  this.imgList.push({
                      file
                  });
              } else {
                  let reader = new FileReader();
                  reader.vue = this;
                  reader.readAsDataURL(file);
                  reader.onload = function () {
                      file.src = this.result;
                     
                      this.vue.imgList.push({
                          file
                      });
                  }
              }
          },
          fileDel(index) {
        	  console.info("del====index"+index)
              this.size = this.size - this.imgList[index].file.size;//总大小
              this.imgList.splice(index, 1);
          },
          bytesToSize(bytes) {
              if (bytes === 0) return '0 B';
              let k = 1000, // or 1024
                  sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                  i = Math.floor(Math.log(bytes) / Math.log(k));
              return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
          },
          dragenter(el) {
              el.stopPropagation();
              el.preventDefault();
          },
          dragover(el) {
              el.stopPropagation();
              el.preventDefault();
          },
          drop(el) {
              el.stopPropagation();
              el.preventDefault();
              this.fileList(el.dataTransfer);
          },
          upload(){
        	
        	 /*  if(this.imgList.length==0){
        		  
        		  alert("请选择图片");
        		  return false;
        	  } */
        	  
        	  let config = {
        	            headers:{'Content-Type':'application/x-www-form-urlencoded'}
        	          };  //添加请求头
        	  axios.post('../image/uploadbase64/',{imageFiles:this.imgList}).then(function(res){
        		 
        		  
        		 
        		 
        		  var html='';
        		  res.data.imageFiles.forEach(function(value, index,array) {
        			  
        			//  console.info("==value=="+value.file.src);
        			  this.vue.imgList.push(value.file);
        			 // this.imgList.push(value.file);
        			  console.info("==this.imgList=="+ this.vue.imgList);
            		  html+='<div class="upload_warp_img_div_top">';
            		  html+='<div class="upload_warp_img_div_text">';
            		  html+='123';
            		  html+=' </div>';
            		  html+=' <img src="./img/del.png" class="upload_warp_img_div_del" @click="fileDel('+index+')">';
            		  html+='</div>';
            		  html+=' <img :src="'+value.file.src+'">';
            		
            		  
        		  });
        			
        		  $("#imgList").append(html); 
        		  
        		  
        	
        		  
        		  
                 
        		 // console.info(res.data.imageFiles[0])
        		  //this.vue.imgList.push(res.data.imageFiles[0]);
        		  
               
        		  
        		  
              }.bind(this)).catch(function(err){
              	 
            	  
              }.bind(this));  
          }
      }
  })
</script>
</body>
</html>
